<template>
  <div class="book-library-page">
    <div class="hero">
      <h1 class="hero-title">典籍库</h1>
      <p class="hero-sub">沉浸式探索 · 古今互证 · 智能助读</p>
    </div>

    <div class="search-bar">
      <div class="search-shell">
        <el-input
          v-model="keyword"
          placeholder="搜索典籍 / 作者 / 关键描述"
          clearable
          class="search-input"
          @keyup.enter="reload"
        >
          <template #prefix>
            <el-icon><i-ep-search /></el-icon>
          </template>
        </el-input>
        <el-button class="search-btn" type="primary" @click="reload">搜索</el-button>
        <el-button v-if="keyword" class="clear-btn" text @click="clearKeyword">清除</el-button>
      </div>
      <p class="tip">支持标题 / 作者名 / 描述关键词模糊匹配</p>
    </div>

    <BookShelf
      :books="booksStore.list"
      :loading="booksStore.listLoading"
      :error="booksStore.listError"
      @select="goDetail"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useBooksStore } from '@/store/books'
import BookShelf from '@/components/book/BookShelf.vue'
import { Search as IEpSearch } from '@element-plus/icons-vue'

const booksStore = useBooksStore()
const router = useRouter()

const keyword = ref('')

function reload() {
  booksStore.loadBooks({ keyword: keyword.value || undefined })
}

function clearKeyword(){ keyword.value=''; reload() }

function goDetail(book) {
  router.push(`/library/${book.id}`)
}

onMounted(() => {
  if (!booksStore.list.length) reload()
})
</script>

<style scoped>
.book-library-page { min-height:100vh; padding: 40px clamp(20px,3vw,70px) 70px; background:linear-gradient(135deg,#f5f3ed 0%,#ece3d4 55%,#e2d8c7 100%); position:relative; }
.book-library-page::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.65),transparent 60%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.5),transparent 65%); mix-blend-mode:overlay; }
.hero { text-align:center; margin-bottom: 32px; }
.hero-title { margin:0; font-size:46px; letter-spacing:2px; font-weight:600; background: linear-gradient(100deg,#b07116,#c8892e 40%,#debb62 78%,#eacf8b); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 10px rgba(160,120,40,.25)); }
.hero-sub { margin:10px 0 0; color:#6d5a40; font-size:15px; letter-spacing:1.2px; font-weight:500; }

/* 新搜索区域 */
.search-bar { max-width: 960px; margin: 0 auto 36px; text-align:center; }
.search-shell { display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); padding:18px 24px; border:1px solid rgba(190,150,90,0.35); border-radius:28px; box-shadow:0 6px 22px -8px rgba(140,100,40,0.25); }
.search-input :deep(.el-input__wrapper){ background:linear-gradient(135deg,#fff,#f6efe4); box-shadow:none; border-radius: 20px !important; padding: 4px 14px; border:1px solid rgba(180,140,80,0.35); }
.search-input :deep(.el-input__inner){ font-size:16px; font-weight:500; letter-spacing:.5px; }
.search-input { width:480px; max-width:100%; }
.search-btn { background:linear-gradient(120deg,#cfa355,#e2c98a); border:none; font-weight:600; letter-spacing:1px; padding:14px 26px; border-radius:20px; box-shadow:0 4px 14px -4px rgba(180,130,50,.45); }
.search-btn:hover { filter:brightness(1.07); }
.clear-btn { font-weight:500; color:#905d1a; }
.tip { margin:10px 0 0; font-size:13px; color:#8a724f; letter-spacing:.5px; }

/* 书架区域整体居中限制宽度 */
.book-library-page :deep(.book-shelf > .grid){ max-width:1400px; margin:0 auto; }
.book-library-page :deep(.book-shelf .grid){ grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
@media (min-width:1600px){
  .book-library-page { padding-left:100px; padding-right:100px; }
  .book-library-page :deep(.book-shelf .grid){ grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
}

/* 调整卡片配色（通过深度选择器覆盖 ElementPlus el-card 内部） */
.book-library-page :deep(.book-card){ border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#fff 0%,#faf4ea 60%,#f2e6d3 100%); border:1px solid rgba(200,160,90,0.35); box-shadow:0 6px 20px -8px rgba(140,100,40,0.28); transition:.3s; }
.book-library-page :deep(.book-card:hover){ box-shadow:0 10px 28px -10px rgba(140,100,40,0.45); }
.book-library-page :deep(.book-card .title){ color:#5a3e16; font-size:16px; }
.book-library-page :deep(.book-card .author){ color:#876a3d; }
.book-library-page :deep(.book-card .chapters){ color:#9c835c; }
.book-library-page :deep(.book-card .cover.placeholder){ background:#e0d2be; }

/* 暗色模式适配 */
@media (prefers-color-scheme: dark){
  .book-library-page { background:linear-gradient(135deg,#2d2823,#3a3229 55%,#463b2f); }
  .book-library-page::before { background:radial-gradient(circle at 20% 18%,rgba(255,255,255,0.12),transparent 60%),radial-gradient(circle at 80% 72%,rgba(255,255,255,0.08),transparent 65%); }
  .hero-title { filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
  .hero-sub { color:#d9c9b4; }
  .search-shell { background:rgba(60,52,45,0.85); border-color:rgba(210,170,90,0.4); }
  .search-input :deep(.el-input__wrapper){ background:linear-gradient(135deg,#4a4036,#3d352d); border:1px solid rgba(210,170,90,0.45); }
  .search-input :deep(.el-input__inner){ color:#eddcc5; }
  .search-btn { background:linear-gradient(120deg,#b7853e,#d7b06d); box-shadow:0 4px 14px -4px rgba(0,0,0,.55); }
  .clear-btn { color:#d7b06d; }
  .tip { color:#c6b090; }
  .book-library-page :deep(.book-card){ background:linear-gradient(160deg,#3d352d,#473d31 60%,#514436); border-color:#5e4f40; box-shadow:0 6px 20px -8px rgba(0,0,0,0.55); }
  .book-library-page :deep(.book-card:hover){ box-shadow:0 12px 30px -12px rgba(0,0,0,0.65); }
  .book-library-page :deep(.book-card .title){ color:#e9ddcf; }
  .book-library-page :deep(.book-card .author){ color:#d7c2a8; }
  .book-library-page :deep(.book-card .chapters){ color:#bfa489; }
  .book-library-page :deep(.book-card .cover.placeholder){ background:#5a4a3a; color:#e9ddcf; }
}
</style>